2021

2024-06-02 07:32| 来源: 网络整理| 查看: 265

一、vue解析富文本【vue中使用 v-html 解析富文本】方法一、直接用v-html解析富文本

举例：

1、后台传过来的数据：在这里插入图片描述 2-1、解析前的代码： 2-2、解析前的结果： 3-1、解析后的代码： 3-2、解析后的结果：

方法二、用 v-html 结合富文本处理函数解析富文本

举例：

1、后台传过来的数据在这里插入图片描述 2-1、封装富文本处理函数

// 富文本处理 showHtml(str){ return str .replace(str ? /&(?!#?\w+;)/g : /&/g, ';') .replace(/;/g,"") .replace(/;/g,"\"") .replace(/'/g, "\'") .replace(/;nbsp;/g,'\u3000') },

2-2、调用富文本处理函数，解析后台传过来的富文本数据在这里插入图片描述对应代码：

// 获取到后台传过来的需要解析的富文本数据，进行解析后，用新数据替换掉原数据 that.newsDetails.data.content = this.showHtml(that.newsDetails.data.content);

3、用v-html将解析后的数据放到html上在这里插入图片描述对应代码：

4、【补充】调整富文本里的图片的大小

// 两种写法 /* 引入less后的写法：/deep/ */ /deep/ .big_text img { max-width: 100%; } /* 未引入less的写法：>>> */ /*.big_text >>> img { max-width: 100%; }*/

5、【补充】解析富文本后，想在其后面加三个点(…)，就可以这样做在这里插入图片描述结果：

【本文地址】

公司简介

联系我们